<template>
  <div class="wh100 p15">
    <div class="common-content wh100 p15">
      <div class="top-search-bar">
        <el-form size="small" ref="queryForm" inline>
          <el-form-item label="">
            <el-input
                style="width: 190px"
                v-model="query.name"
                placeholder="按参数类型名称"
                @input="getLists"
                clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                v-if="auth&&auth.add"
                type="primary"
                icon="el-icon-plus"
                @click="addNotice()">新增
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <Table
          ref="table"
          :table-header="tableHeader"
          :tableData="lists"
          :pg-total-num="total"
          :max-height="tableMaxHeight"
          :page.sync="page"
          :limit.sync="limit"
          @pagination="pagination">
        <div slot="operation" slot-scope="row">
          <i class="el-icon-edit table-btn" @click="edit(row)" title="修改角色" v-if="auth&&auth.edit"></i>
          <i class="el-icon-delete table-btn del" @click="del(row)" title="角色删除" v-if="auth&&auth.del"></i>
        </div>

        <div slot="noticeType" slot-scope="row" style="line-height: 1;">
          <el-tag v-if="parseInt(row.data.noticeType)===0" type="success" size="mini" effect="dark">公告</el-tag>
          <el-tag v-else type="warning" size="mini" effect="dark">通知</el-tag>
        </div>
        <div slot="noticeStatus" slot-scope="row" style="line-height: 1;">
          <el-tag v-if="parseInt(row.data.noticeStatus)===0" type="success" size="mini" effect="dark">正常</el-tag>
          <el-tag v-else type="danger" size="mini" effect="dark">关闭</el-tag>
        </div>
      </Table>
    </div>

    <!--新增弹窗-->
    <AddDailog ref="addDailog" @success="getLists"></AddDailog>
    <EditDailog ref="editDailog" @success="getLists"></EditDailog>
  </div>
</template>

<script>
import Table from "@/components/Table";
import AddDailog from "./comp/AddDailog";
import EditDailog from "./comp/EditDailog";

export default {
  name: "complibrary",
  components: {Table, AddDailog, EditDailog},
  data() {
    return {
      auth: null,
      tableMaxHeight: '50px',
      tableHeader: [
        {prop: "className", name: "参数类型名称", minWidth: 150},
        {prop: "addTime", name: "添加时间", minWidth: 150},
        {prop: "editTime", name: "修改时间", minWidth: 150},
        {prop: "remarks", name: "备注", minWidth: 150},
        {prop: "operation", name: "操作", minWidth: 150, slot: true}
      ],
      lists: [],
      page: 1,
      query: {
        name: ''
      },
      limit: 10,
      total: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tableMaxHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50 - 30 - 48 + 'px'
    })
    this.getLists()
  },
  methods: {
    getLists() {
      this.$api.getPclassListByPage({
        pageNum: this.page,
        pageSize: this.limit,
        className: this.query.name,
      }).then(res => {
        this.auth = res.data.auth
        this.total = res.data.data.total
        this.lists = res.data.data.records.map(item => {
          return {
            ...item,
            addTime: this.$moment(item.addTime).format("YYYY-MM-DD HH:mm:ss"),
            editTime: item.editTime && this.$moment(item.editTime).format("YYYY-MM-DD HH:mm:ss") || ''
          }
        })
      })
    },
    pagination() {
      this.getLists()
    },
    // 新增
    addNotice() {
      this.$refs.addDailog.show()
    },
    // 修改
    edit(row) {
      this.$refs.editDailog.show({
        id: row.data.id,
        className: row.data.className,
        remarks: row.data.remarks
      })
    },
    // 删除
    del(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "error",
        confirmButtonClass: 'el-button--danger'
      }).then(() => {
        this.$api.delPClass({
          id: row.data.id,
        }).then(res => {
          this.$message.success(res.data.msg)
          this.getLists()
        })
      }).catch(() => {
      });
    }
  }
}
</script>

<style scoped>

</style>